<template>
  <div class="chart-container">
    
       <div class="childDiv">
                <titleName class="title-name">hello world</titleName>
                <echartsDemo class="echarts-demo" :salaryData="salaryData" ></echartsDemo>
       </div>
       <div class="childDiv">
                 <titleName class="title-name">hello world</titleName>
                 <echartsDemo class="echarts-demo" :salaryData="salaryData"></echartsDemo>
       </div>
       <div class="childDiv">
                 <titleName class="title-name">hello world</titleName>
                 <echartsDemo class="echarts-demo" :salaryData="salaryData"></echartsDemo>
       </div>

  </div>
</template>

<script>
import titleName from './components/titleName';
import echartsDemo from './components/echartsDemo';
export default {
  name: "demoTwenty10",
  filters: {},
  data() {
    return {
      salaryData:{
           xAxisData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           seriesData:[150, 230, 224, 218, 135, 147, 260],
      },
        
    };
  },
  components: {
     echartsDemo,
     titleName
  },
  created() {},
  mounted() {
      
  },
  methods: {

    
     
  }


};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  flex: 1;
  display: flex;
  .childDiv{
        flex: 1;
        display: flex;
        flex-direction: column;
        //background: red;
        margin-right: 10px;
        .title-name{
             // flex: 1;
        }
        .echarts-demo{
               flex: 1;
        }
       
  }
}
</style>
